<template>
    <div class="wh-100">
        <head-components :title="title">
            <div class="d-flex-between-center" style="width: calc(100% - 150px)">
                <span class="fs-12 color-info-dark-2" style="width: 180px">{{ tip }}</span>
                <Select v-model="option" style="width: 200px" @on-change="getQueryMessage">
                    <Option v-for="item in optionsList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
        </head-components>
        <div class="w-100 h-80 my-auto px-24">
            <div v-for="(item, index) in messagesList" :key="index" class="bor-base-b px-16">
                <div style="font-size: 12px; font-weight: bold" class="pt-8">{{ item.title }}</div>
                <div style="font-size: 10px" class="pt-8 pb-8">{{ item.content }}</div>
            </div>
        </div>
        <div class="bor-base-t w-100 h-10 d-flex-align-center" v-if="messagesList.length > 10">
            <Page show-sizer :total="Number(messagesList.length)" show-elevator />
        </div>
    </div>
</template>

<script>
import HeadComponents from '../../mutualSelection/systemManagement/my-components/headComponents.vue';
export default {
    components: { HeadComponents },
    data() {
        return {
            title: '消息通知',
            tip: '仅保留近3个月收到的通知',
            option: '',
            optionsList: [
                { value: 'all', label: '全部' },
                { value: 'systemNotification', label: '系统通知' },
                { value: 'deliveryFeedback', label: '简历投递反馈' },
                { value: 'makeAnOffer', label: '企业主动邀约' }
            ],
            messagesList: [
                { id: 1, title: '双选会报名成功', content: '双选会报名成功，请2023年11月23日 10：00 准时参加，活动地址：郑州大学 体育馆 展位号10号！' },
                { id: 2, title: '毕业去向登记', content: '你申请的毕业去登记，申请被驳回' },
                { id: 3, title: '面试的项目推广职位', content: '面试结果不通过' },
                { id: 4, title: '系统功能', content: '系统更新了简历增加设置隐私功能，请使用！' }
            ]
        };
    },
    watch: {},
    methods: {
        // region TODO 下拉框搜索筛选
        getQueryMessage(e) {
            console.log('搜索筛选' + e);
        }
        // endregion
    }
};
</script>
<style scoped></style>
